<template>
    <div class="reg">
        <div class="reg_all">
            <div class="reg_top">
                <div class="reg_back" @click="back"></div>
            </div>
            <div class="welcome">
                你好<br/>
                欢迎来到寻匠之美
            </div>
            <div class="phone"> 
                <input type="text"  v-model.trim="phone" oninput = "value=value.replace(/[^\d]/g,'')" v-on:input="canon"   class="reg_inp" maxlength="11"  placeholder="请输入手机号">
            </div>
            <div class="verify">
                <input type="text" v-model.trim="verify" class="reg_inp" v-on:input="canon" placeholder="请输入验证码" maxlength="6" ref="inputs">
                <div class="verify_div">
                    <input type="button" class="verify_btn" :value="btntxt" :disabled="!disabled"   @click="getCode">
                </div>
            </div>            
            <div class="password">
                <input :type="inputType" v-model.trim="password" class="reg_inp" v-on:input="canon" placeholder="请输入密码" maxlength="12">
                <div :class="eye?'see':'eye'" @click="showPass"></div>
            </div>
            <div class="invite">
                <input type="text" v-model.trim="invite" class="reg_inp" v-on:input="canon" placeholder="请输入邀请码" maxlength="6">
                <div class="invite_div" @click="open">
                    选择邀请码
                </div>
            </div>     
            <div class="reg_div">
                <input type="button" :class="rule?'reg_true':'reg_btn'" value="注册"  :disabled="!rule"  @click="reg"> 
            </div>
            <div class="reg_agree">
                <div :class="agree?'agree_check':'noagree_check'" @click="draw"></div>
                <div class="agree_exp">我已阅读并同意<router-link to="privacy">《用户协议》</router-link>与<router-link to="agreement">《隐私政策》</router-link></div>
            </div>
        </div>    
        <div class="container"  v-if="container" @click="close"></div>
        <div class="container_info"  v-if="container" >
            <div class="party">
                <div class="default">选择你的默认邀请码
                    <div class="close_x"  @click="close"></div>
                </div>
                <div class="kote">
                    <div class="invite_code" v-for="(item, index) in spreadCode" :key="index" @click="banana(index)">
                        <div class="commit" v-text="item.code"></div>
                        <div :class="nth===index?'boxed':'box'" ></div>
                    </div>  
                </div>      
                <div class="operate">
                    <div class="cancel" @click="close">取消</div>
                    <div class="confirm"  @click="sure">确定</div>
                </div>
            </div>    
        </div>
    </div>    
</template>
<script>
    export default {
        name: 'Reg',
        data () {
             return {
                phone:'',
                verify:'',
                password:'',
                invite:'',
                eye:true,
                rule:false,  
                agree:false,  
                inputType:'password', 
                btntxt:"获取验证码",
                disabled:false,
                time:0,
                container:false,
                spreadCode:"",
                nth:0,
             }
        },
        created(){
            document.title="注册";
            //获取邀请码
                this.$axios.get('/v1/common/getSpreadCode').then(res => {
                    var result=res.data;
                    if(result.code==200){
                       this.spreadCode=result.data;
                    }else{
                       Toast(result.msg)
                    }
                }, res => {
                    console.log("error");
                }); 
        },
         methods:{
             back(){
                this.$router.go(-1);
             },
            showPass(){
                this.eye=!this.eye;
                if (this.eye) {
                    this.inputType = 'password'
                } else {
                    this.inputType = 'text'
                }
            },
            canon(){
                if(this.phone.length==11){
                    this.disabled=true;
                }else{
                    this.disabled=false;
                }
                if(this.phone.length==11&&this.password.length>=6&&this.invite.length>0&&this.verify.length>0){
                    this.rule=true;
                }else{
                   this.rule=false; 
                }
            },    
            draw(){
                this.agree=!this.agree;
            },
            reg(){
                if(this.agree){       
                    this.$axios.post('/v1/common/register',{                  
                        mobile: this.phone,
                        spread_code:this.invite,
                        password:this.password,
                        code:this.verify,
                    }).then(res => {          
                        var result=res.data;
                        if(result.code==200){
                            var token=result.data.token;
                            localStorage.setItem('token',token);
                            this.$router.push({path:'/center'}); 
                        }else{
                            Toast(result.msg)
                        }
                    }, res => {
                        console.log("error");
                    });
                }else{
                    Toast("请勾选同意协议");
                } 
            },  
            //点击选择邀请码
            banana(e){
                this.nth=e;
            },
            //获取验证码
            getCode(){
                this.$axios.post('/v1/common/sendCode',{
                    mobile: this.phone,
                    type:1,
                }).then(res => {
                    var result=res.data;
                    if(result.code==200){
                        Toast('验证码发送成功，请在手机端查收');
                        this.time=60;
                        this.timer();
                        this.$refs.inputs.focus();
                    }else{
                        Toast(result.msg);
                    }
                }, res => {
                        console.log("error");
                });
            },
            timer() {
                if (this.time > 0) {
                    this.time--;
                    this.btntxt=this.time+"s后重新获取";
                    this.disabled=false;
                    setTimeout(this.timer, 1000);
                } else{
                    this.time=0;
                    this.btntxt="获取验证码";
                    if(this.phone.length==11){
                        this.disabled=true;
                    }else{
                        this.disabled=false;
                    }                   
                }
            },    
            close(){
                this.container=false;  
            },  
            open(){
                this.container=true;
            },
            sure(){
                this.invite=this.spreadCode[this.nth].code;
                if(this.phone.length==11&&this.password.length>=6&&this.verify.length>0){
                    this.rule=true;
                }else{
                   this.rule=false; 
                }
                this.container=false;
            }
         },    
    }
</script>
<style scoped>
.reg{width:100%;position: fixed;height:100%;}
.reg_all{width:698px;margin:0 auto;}
.reg_top{display: flex;justify-content:space-between;margin-top:30px;}
.reg_back{width:48px;height:48px;background:url("/static/images/team_go_back.png") no-repeat center center;background-size:100% 100%; }
.reg_name{color:#000;font-size:32px;}
.password{position: relative;}
.see{width:48px;height:48px;background:url("/static/images/see.png") no-repeat center center;background-size:100% 100%;position: absolute;right:0;top:34px;}
.eye{width:48px;height:48px;background:url("/static/images/eye.png") no-repeat center center;background-size:100% 100%;position: absolute;right:0;top:34px;}
.welcome{font-size:52px;color:#333333;font-weight:bold;margin-top:56px;margin-bottom:60px;}
.reg_inp{border:none;width:100%;height:104px;border-bottom:2px solid #ECECEC;font-size:32px;}
.reg_btn{width:100%;height:98px;line-height:100px;border-radius:50px;text-align:center;font-size:32px;color:#4A4A4A;background:#ECECEC;margin-top:70px;cursor:pointer;outline:0px; -webkit-appearance:none;border:none;}
.reg_true{width:100%;height:98px;line-height:100px;border-radius:50px;text-align:center;font-size:32px;color:#333334;background:#FFE514;margin-top:70px;cursor:pointer;outline:0px; -webkit-appearance:none;border:none;}
.verify{position: relative;}
.verify_btn{background:#FFF;padding:12px 8px;border:2px solid #4A4A4A;font-size:24px;color:#000000;text-align: center;border-radius:4px;position: absolute;right:0;top:26px;cursor:pointer;outline:0px; -webkit-appearance:none;}
.invite{position: relative;}
.invite_div{width:170px;height:80px;line-height:80px;font-size:24px;color:#000000;position: absolute;right:0;top:20px;background:url("/static/images/reg_go.png") no-repeat right center;background-size:40px 40px; }
.check{width:36px;height:36px;border:2px solid #ccc;}
.reg_agree{display: flex;justify-content: flex-start;margin-top:46px;}
.noagree_check{width:36px;height:36px;background:url("/static/images/noagree.png") no-repeat center center;background-size:100% 100%;margin-top:3px;margin-right:8px;}
.agree_check{width:36px;height:36px;background:url("/static/images/agree.png") no-repeat center center;background-size:100% 100%;margin-top:3px;margin-right:8px;}
.agree_exp{font-size:28px;color:#9B9B9B;}
.agree_exp a{color:#9B9B9B;text-decoration:none;}
.container{position: fixed;width:100%;height:100%;background:#000000;z-index:1;top: 0;left: 0; right: 0;bottom: 0;opacity:0.3;}
.container_info{width:100%;height:700px;background:#FFF;position: fixed;left: 0; right: 0;bottom: 0;margin:auto;opacity:1;z-index:2;border-radius:44px 44px 0 0;}
.container_info .party{width:700px;margin:0 auto;}
.party .default{line-height:104px;font-size:28px;color: #191D3A;text-align: center;position: relative;border-bottom:2px solid #ECECEC;}
.party .close_x{width:48px;height:48px;background:url("/static/images/close_x.png") no-repeat center center;background-size:100% 100%;position: absolute;top:26px;right:16px;}
.invite_code{line-height:100px;display: flex;justify-content: space-between;}
.commit{font-size:28px;color:#000000;}
.box{width:52px;height:52px;background:url("/static/images/cash.png") no-repeat center center;background-size:100% 100%;margin-top:24px;margin-right:12px;}
.boxed{width:52px;height:52px;background:url("/static/images/coshed.png") no-repeat center center;background-size:100% 100%;margin-top:24px;margin-right:12px;}
.operate{width:700px;display:flex;justify-content: space-between;position: absolute;bottom:52px;left:0;right:0;margin:auto;}
.operate .cancel{width:320px;line-height:104px;border-radius:40px;border:2px solid #9B9B9B;text-align: center;font-size:32px;color:#333334;}
.operate .confirm{width:320px;line-height:104px;border-radius:40px;background:#FFE514;text-align: center;font-size:32px;color:#191D3A;}
.kote{max-height:408px;overflow: hidden;}
</style>